<template>
  <div class="message">
    <div class="project-info-content">
      <header>
        <span>排序：<b class="active-blue m-r-10">发布日期</b> 热度</span>
        <span class="input-box">
          <el-input v-model="searchForm.value" placeholder="请输入关键词进行搜索" class="input-with-select" style="width: 420px; height: 35px">
            <template #prepend>
              <el-select v-model="searchForm.key" placeholder="Select" style="width: 120px">
                <el-option label="全文" value="1" />
              </el-select>
            </template>
            <template #append>
              <el-button icon="Search" />
            </template> </el-input></span>
      </header>
      <main>
        <ul>
          <li v-for="(item, index) in noticeList" :key="index">
            <!-- <span class="num">0{{ index+1 }}</span> -->
            <span class="title">{{ item.title }}
              <el-button type="primary" plain size="small">下载</el-button>
            </span>
            <span class="time">{{ item.time }}</span>
          </li>
        </ul>
        <el-pagination class="m-t" :current-page="queryParams.currentPage" :page-size="queryParams.pageSize" :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper" :total="queryParams.total" />
      </main>
    </div>
  </div>
</template>

<script >
export default {
  data() {
    return {
      searchForm: {
        key: "1",
        value: "",
      },
      queryParams: {
        total: 18,
        currentPage: 1,
        pageSize: 10
      },
      noticeList: [
        {
          title:
            '共享大科学装置 共建重点实验室 共育新质生产力 长三角战略科技力量协同正提速通知',
          time: '2024-04-09'
        },
        {
          title: '南京航空航天大学关于开展2023年度大型仪器设备共享绩效考核的通知',
          time: '2024-04-18'
        },
        {
          title:
            '内蒙古自治区科学技术厅关于开展2023年度自治区科研基础设施和大型科研仪器 开放共享的通知',
          time: '2024-03-21'
        },
        {
          title: '关于开展2023年度吉林省科研设施和仪器开放共享工作的通知',
          time: '2024-03-10'
        },
        {
          title: '2023年度北京市属管理单位科研设施与仪器开放共享情况评价结果',
          time: '2024-03-01'
        },
        {
          title:
            '福建省科学技术厅关于下达大型科研仪器向社会开放共享运行奖励经费有关事项的通知',
          time: '2024-02-24'
        },
        {
          title:
            '浙江省科学技术厅 浙江省财政厅 浙江省教育厅关于公布2022年度浙江省大型科研仪器开放共享评价结果的通知',
          time: '2024-02-19'
        },
        {
          title:
            '深圳市科技创新委员会关于公示2022年度大型科研仪器开放共享服务考核评价结果的通知',
          time: '2024-01-08'
        }
      ]
    }
  }
}

</script>

<style lang="less" scoped>
  .message {
    background: url('~@/assets/img/通知公告.png') no-repeat center;
    background-size: 100% 100%;
    padding: 30px 0;
  }
  .project-info-content {
    width: 63%;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 4px;
    padding: 20px;
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #dadcde;
      padding-bottom: 10px;
      color: #333;
      .active-blue {
        color: #358aff;
      }
      :deep(.input-box) {
        font-size: 16px !important;
        border: 1px solid #dbddde;
        .el-input {
          width: 100% !important;
        }
        border-radius: 4px;
        .el-input__wrapper,
        .el-input__inner {
          border: none !important;
          box-shadow: none !important;
          color: #333 !important;
        }
        .el-input-group__prepend,
        .el-input__wrapper,
        .el-input-group__append {
          background: transparent;
          border: none !important;
          box-shadow: none !important;
          color: #333 !important;
        }
      }
    }
    main {
      ul {
        li {
          position: relative;
          padding: 20px 20px 15px 30px;
          border-bottom: 1px dashed #c5c6c8;
          display: flex;
          justify-content: space-between;
          .title::before {
            position: absolute;
            left: 5px;
            top: 27px;
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #d2dce4;
            z-index: 1;
          }
          .time {
            color: #999;
          }
          // .num {
          //   font-family: PingFangSC, PingFang SC;
          //   font-weight: 500;
          //   font-size: 40px;
          //   color: #1D6FDB;
          // }
        }
      }
    }
  }
</style>
